<!-- 电梯 》 扶梯列表 -->

<template>
  <CommonBody hasRegion bind="areaId" @change="toChange">
    <div class="lift-hand">
      <div class="lift-hand__filter-utils">
        <el-checkbox-group
          class="lift-hand__checkout-group"
          v-model="model.search.status"
          @change="handleCurrentChange(1)"
        >
          <el-checkbox label="2">正常 {{ model.normalCount }}</el-checkbox>
          <el-checkbox label="1">故障 {{ model.faultCount }}</el-checkbox>
        </el-checkbox-group>
        <el-input
          class="lift-hand__input"
          v-model="model.search.deviceName"
          placeholder="请输入设备名称"
          clearable
        ></el-input>
        <el-button icon="el-icon-search" type="primary" @click="handleCurrentChange(1)">查询</el-button>
      </div>
      <div v-if="model.list.length && model.list.length" class="lift-hand__list-wrapper">
        <div class="lift-hand__list">
          <div
            v-for="item in model.list"
            :key="item.deviceId"
            class="lift-hand__item-wrapper"
            @click="showDetailDialog(item.deviceId)"
          >
            <LiftHandItem :info="item" />
          </div>
        </div>
      </div>
      <div v-else class="lift-hand__no-list">暂无扶梯列表！</div>
      <div class="lift-hand__page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="model.pagination.page"
          :page-sizes="[15, 30, 45, 60]"
          :page-size="model.pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="model.pagination.total"
        >
        </el-pagination>
      </div>
    </div>

    <EasyModal v-model="model.detailDialog.isShow" title="设备详情" :width="680" :no-footer="true">
      <LiftHandItemDetails :id="model.detailDialog.id" />
    </EasyModal>
  </CommonBody>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from './store'
import index from './index'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'LiftHand',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixStore(store), index],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 创建完成 (先抽取再调用)
   */
  mounted() {
    // 默认选中根节点
    CORE.REGION.TREE.length && this.toChange(CORE.REGION.TREE[0])
  },
}
</script>

<style lang="scss" scoped>
.lift-hand {
  height: 100%;
  display: flex;
  flex-direction: column;

  &__checkout-group {
    width: 200px;
  }

  &__input {
    width: 300px !important;
    margin-right: 10px;
  }

  &__filter-utils {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  &__list-wrapper {
    flex: 1;
    overflow: hidden;
  }

  &__list {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
  }

  &__no-list {
    text-align: center;
    flex: 1;
    color: #666;
  }

  &__item-wrapper {
    display: inline-block;
    width: 20%;
  }

  &__page {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
  }
}
</style>
